<!--
Author: W3layouts
Author URL: http://w3layouts.com
-->
<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>联系网站管理</title>
    <!-- google-fonts -->
    <link href="//fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap"
        rel="stylesheet">
    <!-- //google-fonts -->
    <!-- Template CSS Style link -->
    <link rel="stylesheet" href="/static/assets/css/style-starter.css">
    <link href="/static/hAdmin/css/plugins/toastr/toastr.min.css" rel="stylesheet">
</head>

<body>
    <!--header-->
    <header id="site-header" class="fixed-top">
        <div class="container">
            <nav class="navbar navbar-expand-lg stroke">
                <h1>
                    <a class="navbar-brand" href="/web/pagesIndex">
                        <img class="img-fluid" style="width: 70px;height: 70px;" src="/static/assets/images/logo.jpg" alt=" "> 高邮文化宣传站
                    </a>
                </h1>
                <!-- if logo is image enable this
    <a class="navbar-brand" href="#index.html">
        <img src="image-path" alt="Your logo" title="Your logo" style="height:35px;" />
    </a> -->
                <button class="navbar-toggler  collapsed bg-gradient" type="button" data-toggle="collapse"
                    data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false"
                    aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon fa icon-expand fa-bars"></span>
                    <span class="navbar-toggler-icon fa icon-close fa-times"></span>
                </button>

                <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
                    <ul class="navbar-nav ml-lg-auto">
                        <li class="nav-item ">
                            <a class="nav-link" href="/web/pagesIndex">主页 <span class="sr-only">(current)</span></a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link" href="/web/courses">景点/特色</a>
                        </li>
                        <li class="nav-item active">
                            <a class="nav-link" href="/web/contact">留言</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/web/myCourse">我预定的景点/特色</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/web/personal">个人中心</a>
                        </li>
                        <!-- search button -->
                        <div class="search-right">
                            <a href="javascript:void(0)" id="logout" class="btn button-style" title="退出登录">退出登录</a>
                            <!-- search popup -->
                            <div id="search" class="pop-overlay">
                                <div class="popup">
                                    <h4 class="search-pop-text-w3 text-white text-center mb-4">Search Here Your
                                        Online Course
                                    </h4>
                                    <form action="#error" method="GET" class="search-box">
                                        <div class="input-search"> <span class="fa fa-search mr-2"
                                                aria-hidden="true"></span><input type="search"
                                                placeholder="Enter Keyword" name="search" required="required"
                                                autofocus="">
                                        </div>
                                        <button type="submit" class="btn button-style">Search</button>
                                    </form>
                                </div>
                                <a class="close" href="#close">×</a>
                            </div>
                            <!-- //search popup -->
                        </div>
                        <!-- //search button -->
                    </ul>
                </div>
                <!-- toggle switch for light and dark theme -->
                <div class="cont-ser-position">
                    <nav class="navigation">
                        <div class="theme-switch-wrapper">
                            <label class="theme-switch" for="checkbox">
                                <input type="checkbox" id="checkbox">
                                <div class="mode-container">
                                    <i class="gg-sun"></i>
                                    <i class="gg-moon"></i>
                                </div>
                            </label>
                        </div>
                    </nav>
                </div>
                <!-- //toggle switch for light and dark theme -->
            </nav>
        </div>
    </header>
    <!--//header-->
    <!-- inner banner -->
    <div class="inner-banner">
        <section class="w3l-breadcrumb">
            <div class="container">
                <h4 class="inner-text-title font-weight-bold mb-sm-3 mb-2">给我们留言</h4>
                <ul class="breadcrumbs-custom-path">
                    <li><a href="/web/pagesIndex">主页</a></li>
                    <li class="active"><span class="fa fa-chevron-right mx-2" aria-hidden="true"></span> 留言</li>
                </ul>
            </div>
        </section>
    </div>
    <!-- //inner banner -->
    <!-- contact -->
    <section class="contact py-5" id="contact">
        <div class="container py-md-4 py-3">
            <div class="title-main text-center mx-auto mb-md-4">
                <h3 class="title-big">留言能做什么</h3>
                <p class="sub-title mt-2">您宝贵的留言可以为我们提供建设性的意见，帮助我们更好地服务大家.</p>
            </div>
            <div class="main-grid-contact">
                <div class="row mt-5 mx-0">

                    <!-- contact form -->
                    <div class="col-lg-12 content-form-right p-0">
                        <div class="form-w3ls p-md-5 p-4">
                            <h4 class="mb-4 sec-title-w3">请输入你的留言内容</h4>
                            <form method="post" >

                                <div class="form-group">
                                    <textarea class="form-control" name="w3lMessage" id="content"
                                        placeholder="留言内容" required=""></textarea>
                                </div>
                                <div class="input-group1 text-right">
                                    <button class="btn button-style" id="sendMessage" type="button">提交
                                        <i class="fa fa-angle-double-right" aria-hidden="true"></i>
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- //contact -->

    <!-- Js scripts -->
    <!-- move top -->
    <button onclick="topFunction()" id="movetop" title="Go to top">
        <span class="fa fa-level-up" aria-hidden="true"></span>
    </button>
    <script>
        // When the user scrolls down 20px from the top of the document, show the button
        window.onscroll = function () {
            scrollFunction()
        };

        function scrollFunction() {
            if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
                document.getElementById("movetop").style.display = "block";
            } else {
                document.getElementById("movetop").style.display = "none";
            }
        }

        // When the user clicks on the button, scroll to the top of the document
        function topFunction() {
            document.body.scrollTop = 0;
            document.documentElement.scrollTop = 0;
        }
    </script>
    <!-- //move top -->

    <!-- common jquery plugin -->
    <script src="/static/assets/js/jquery-3.3.1.min.js"></script>
    <!-- //common jquery plugin -->

    <!-- theme switch js (light and dark)-->
    <script src="/static/assets/js/theme-change.js"></script>
    <script>
        function autoType(elementClass, typingSpeed) {
            var thhis = $(elementClass);
            thhis.css({
                "position": "relative",
                "display": "inline-block"
            });
            thhis.prepend('<div class="cursor" style="right: initial; left:0;"></div>');
            thhis = thhis.find(".text-js");
            var text = thhis.text().trim().split('');
            var amntOfChars = text.length;
            var newString = "";
            thhis.text("|");
            setTimeout(function () {
                thhis.css("opacity", 1);
                thhis.prev().removeAttr("style");
                thhis.text("");
                for (var i = 0; i < amntOfChars; i++) {
                    (function (i, char) {
                        setTimeout(function () {
                            newString += char;
                            thhis.text(newString);
                        }, i * typingSpeed);
                    })(i + 1, text[i]);
                }
            }, 1500);
        }

        $(document).ready(function () {
            // Now to start autoTyping just call the autoType function with the
            // class of outer div
            // The second paramter is the speed between each letter is typed.
            autoType(".type-js", 200);
        });
    </script>
    <!-- //theme switch js (light and dark)-->
    <script src="/static/hAdmin/js/jquery.min.js?v=2.1.4"></script>
    <!-- MENU-JS -->
    <script>
        $(window).on("scroll", function () {
            var scroll = $(window).scrollTop();

            if (scroll >= 80) {
                $("#site-header").addClass("nav-fixed");
            } else {
                $("#site-header").removeClass("nav-fixed");
            }
        });

        //Main navigation Active Class Add Remove
        $(".navbar-toggler").on("click", function () {
            $("header").toggleClass("active");
        });
        $(document).on("ready", function () {
            if ($(window).width() > 991) {
                $("header").removeClass("active");
            }
            $(window).on("resize", function () {
                if ($(window).width() > 991) {
                    $("header").removeClass("active");
                }
            });
        });
    </script>
    <!-- //MENU-JS -->

    <!-- disable body scroll which navbar is in active -->
    <script>
        $(function () {
            $('.navbar-toggler').click(function () {
                $('body').toggleClass('noscroll');
            })
        });
    </script>
    <!-- //disable body scroll which navbar is in active -->

    <!--bootstrap-->
    <script src="/static/assets/js/bootstrap.min.js"></script>
    <!-- //bootstrap-->
    <!-- //Js scripts -->
    <span id="gloUrl" style="display: none"></span>
    <script src="/static/hAdmin/js/plugins/toastr/toastr.min.js"></script>
    <script src="/static/js/GloJs.js"></script>
    <script>
        $(function (){
            let Glo_BaseUrl = $("#gloUrl").attr("gloUValue")
            let Glo_user = localStorage.getItem("userId")
            $("#sendMessage").click(function () {
                if ($("#content").val()=== ""){
                    toastr.error("内容为空,说点什么吧！", '提示!')
                    return false;
                }
                var formData = new FormData();//这里需要实例化一个FormData来进行文件上传
                formData.append("senderId",Glo_user);
                formData.append("receiveId",1);
                formData.append("content",$("#content").val());
                formData.append("status","1");

                $.ajax({
                    url: Glo_BaseUrl + "/message/add",
                    type: "post",
                    data:formData
                    ,
                    processData : false,
                    contentType : false,
                    success: function (data) {

                        if (data.code === 200) {
                            toastr.success("成功", '提示!')
                            $("#content").val("")
                        } else {
                            toastr.error(data.msg, '提示!')
                        }
                    },
                    error: function () {
                        alert("服务器异常！network error！")
                    }
                })
            })
            // 退出登录
            $("#logout").click(function (){
                $.ajax({
                    url: Glo_BaseUrl + "/admin/logout",
                    type: "get",
                    data: {

                    },
                    success: function (data) {
                        location.reload()
                        localStorage.removeItem("dept")
                        localStorage.removeItem("userId")
                    },
                    error: function () {
                        alert("服务器异常！network error！")
                    }
                })
            })
        })

    </script>
</body>

</html>
